<template>
    <div class="practice-record-container">
      <!-- 标题 -->
      <h1 class="record-title">练习记录</h1>
      
      <!-- 记录列表 -->
      <el-card class="record-card" shadow="never">
        <!-- 语文记录 -->
        <div class="record-item">
          <div class="subject-info">
            <h3>语文练习</h3>
            <div class="detail-row">
              <span class="label">用时：</span>
              <span class="value">00:28:23</span>
            </div>
            <div class="detail-row">
              <span class="label">得分：</span>
              <span class="value">78分</span>
            </div>
          </div>
          <div class="record-right">
            <span class="record-date">2025-01-01</span>
            <el-button type="primary" size="small">查看错题</el-button>
          </div>
        </div>
        
        <!-- 分隔线 -->
        <el-divider border-style="dashed"></el-divider>
        
        <!-- 英语记录 -->
        <div class="record-item">
          <div class="subject-info">
            <h3>英语练习</h3>
            <div class="detail-row">
              <span class="label">用时：</span>
              <span class="value">00:36:51</span>
            </div>
            <div class="detail-row">
              <span class="label">得分：</span>
              <span class="value">48分</span>
            </div>
          </div>
          <div class="record-right">
            <span class="record-date">2024-01-01</span>
            <el-button type="primary" size="small">查看错题</el-button>
          </div>
        </div>
      </el-card>
    </div>
  </template>
  
  <script>
  export default {
    name: 'PracticeRecord'
  }
  </script>
  
  <style scoped>
  .practice-record-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: white;
  }
  
  .record-title {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
  }
  
  .record-card {
    border: none;
  }
  
  .record-item {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
  }
  
  .subject-info h3 {
    margin: 0 0 10px 0;
    color: #333;
  }
  
  .detail-row {
    margin-bottom: 5px;
    font-size: 14px;
  }
  
  .label {
    color: #666;
  }
  
  .value {
    color: #333;
  }
  
  .record-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  
  .record-date {
    color: #999;
    font-size: 13px;
    margin-bottom: 10px;
  }
  
  .el-divider {
    margin: 10px 0;
  }
  </style>